<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS盒子模型实例</title>
  <style>
    /* 基础样式：方便观察盒子 */
    body {
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    .box {
      width: 100px;  /* 内容区宽度（标准模型）/ 总宽度（IE模型） */
      height: 100px; /* 内容区高度（标准模型）/ 总高度（IE模型） */
      margin: 20px;  /* 外边距：与其他元素的距离 */
      text-align: center;
      line-height: 100px; /* 文字垂直居中 */
      color: #fff;
      float: left; /* 让盒子横向排列 */
    }
    /* 1. 标准盒子模型（默认，content-box） */
    .box1 {
      background-color: #3498db;
      padding: 10px;  /* 内边距：10px */
      border: 5px solid #2980b9; /* 边框：5px实线 */
      /* 实际尺寸：100 + 10*2 + 5*2 = 130px（宽/高） */
    }
    /* 2. IE盒子模型（border-box） */
    .box2 {
      background-color: #e74c3c;
      padding: 10px;
      border: 5px solid #c0392b;
      box-sizing: border-box; /* 启用IE盒子模型 */
      /* 实际尺寸：100px（宽/高，内边距和边框从内容区扣除） */
    }

    /* 3. 无内边距和边框的对比盒子 */
    .box3 {
      background-color: #2ecc71;
      /* 无padding和border，实际尺寸=100px（宽/高） */
    }
  </style>
</head>
<body>
  <div class="box box1">标准模型</div>
  <div class="box box2">IE模型</div>
  <div class="box box3">无内边距/边框</div>
</body>
</html>